<template>
  <div class="father">
    <div class="card">
      <el-row :gutter="5">
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>工单执行情况</span>
            </div>
            <scEcharts height="300px" :option="option"></scEcharts>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>工单响应时间</span>
            </div>
            <div class="chart">
              <div class="text">
                <p class="size">平均（小时/单）</p>
                <p>
                  <span class="size">累计</span>
                  <span class="numsize"></span>
                </p>
                <p>
                  <span class="size">去年</span>
                  <span class="numsize"></span>
                </p>
                <p>
                  <span class="size">今年</span>
                  <span class="numsize"></span>
                </p>
              </div>
              <div class="scecharts">
                <scEcharts height="300px" :option="option2"></scEcharts>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>员工执行绩效分析</span>
            </div>
            <div class="chart">
              <div class="text">
                <p class="size">累计（分）</p>
                <p>
                  <span class="size">员工1</span>
                  <span class="numsize"></span>
                </p>
                <p>
                  <span class="size">员工2</span>
                  <span class="numsize"></span>
                </p>
                <p>
                  <span class="size">员工3</span>
                  <span class="numsize"></span>
                </p>
              </div>
              <div class="scecharts">
                <scEcharts height="300px" :option="option3"></scEcharts>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <div class="card-header">
              <span>工单完成时间</span>
            </div>
            <div class="chart">
              <div class="text">
                <p class="size">平均（小时/单）</p>
                <p>
                  <span class="size">累计</span>
                  <span class="numsize"></span>
                </p>
                <p>
                  <span class="size">去年</span>
                  <span class="numsize"></span>
                </p>
                <p>
                  <span class="size">今年</span>
                  <span class="numsize"></span>
                </p>
              </div>
              <div class="scecharts">
                <scEcharts height="300px" :option="option4"></scEcharts>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-card>
            <div class="card-header">
              <span>设施操作人员绩效</span>
            </div>
            <div class="card-table">
              <div class="select">
                <el-time-picker
                  v-model="value1"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  :clearable="false"
                  :onChange="handleTime"
                />
                <el-button class="btn" @click="exportExcel">下载</el-button>
                <!-- <el-button class="btn">打印</el-button> -->
              </div>
              <el-table
                id="table"
                :data="tableData"
                border
                style="width: 100%"
                :header-cell-style="{
                  'text-align': 'center',
                  background: '#B4C7E7',
                  color: '#333333',
                }"
                :cell-style="{
                  'text-align': 'center',
                  background: '#f5f8fb',
                }"
              >
                <el-table-column prop="staffName" label="姓名" />
                <el-table-column prop="executionNum" label="执行工单数" />
                <el-table-column prop="responseTime" label="响应时间（平均）" />
                <el-table-column
                  prop="actualFinishTime"
                  label="实际完成时间/预期完成时间（%平均）"
                />
                <el-table-column
                  prop="implementationRate"
                  label="执行率（平均）"
                />
                <el-table-column
                  prop="executionSuccessRate"
                  label="执行成功率（平均）"
                />
                <el-table-column prop="remark" label="备注" />
              </el-table>
              <div class="current">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  v-model:currentPage="currentPage"
                  :page-size="5"
                  layout="prev, pager, next, jumper"
                  :total="total"
                >
                </el-pagination>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import scEcharts from "@/components/scEcharts";
import { ProjectGroupone, getStaffData } from "@/api/model/echarts";
import FileSaver from "file-saver";
import * as XLSX from "xlsx/dist/xlsx.mini.min.js";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isBetween);

export default {
  components: {
    scEcharts,
  },
  data() {
    return {
      option: {
        legend: {
          data: ["累计执行率", "执行成功率"],
          orient: "vertical",
          left: "right",
          top: "75%",
          align: "left",
        },
        grid: {
          top: "50px",
          right: "130px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [],
          name: "年",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            name: "累计执行率",
            data: [],
            type: "bar",
            barWidth: "50px",
            barGap: "0%",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
          {
            name: "执行成功率",
            data: [],
            type: "bar",
            barWidth: "50px",
            itemStyle: {
              normal: {
                color: "#0070c0",
              },
            },
          },
        ],
      },
      option2: {
        grid: {
          top: "50px",
          right: "50px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [],
          name: "月",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "小时",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            data: [],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
        ],
      },
      option3: {
        legend: {
          data: ["员工1", "员工2", "员工3"],
          orient: "vertical",
          left: "right",
          top: "70%",
          align: "left",
        },
        grid: {
          top: "50px",
          right: "110px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [],
          name: "年",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            name: "员工1",
            data: [],
            type: "bar",
            barWidth: "30px",
            barGap: "0%",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
          {
            name: "员工2",
            data: [],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#0070c0",
              },
            },
          },
          {
            name: "员工3",
            data: [],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#ffc40f",
              },
            },
          },
        ],
      },
      option4: {
        grid: {
          top: "50px",
          right: "50px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: [],
          name: "月",
          nameTextStyle: {
            color: "#7E7E7E",
          },
          axisLabel: {
            color: "#7E7E7E",
          },
        },
        yAxis: {
          type: "value",
          name: "小时",
          nameTextStyle: {
            color: "#7E7E7E",
          },
        },
        series: [
          {
            data: [],
            type: "bar",
            barWidth: "30px",
            itemStyle: {
              normal: {
                color: "#d6ebfa",
              },
            },
          },
        ],
      },
      tableData: [],
      currentPage: 1,
      A: {
        indicatorName: "工单执行情况",
        firstType: "员工绩效",
        secondType: "",
        projectId: 1,
        thirdType: "",
        dataType: "day",
        dayFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
        dayTo: dayjs().format("YYYY-MM-DD"),
      },
      B: {
        indicatorName: "工单响应时间",
        firstType: "员工绩效",
        secondType: "",
        thirdType: "",
        projectId: 1,
        dataType: "day",
        dayFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
        dayTo: dayjs().format("YYYY-MM-DD"),
      },
      C: {
        indicatorName: "员工执行绩效分析",
        firstType: "员工绩效",
        secondType: "",
        thirdType: "",
        projectId: 1,
        dataType: "year",
        dayFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
        dayTo: dayjs().format("YYYY-MM-DD"),
      },
      D: {
        indicatorName: "工单完成时间",
        firstType: "员工绩效",
        secondType: "",
        thirdType: "",
        projectId: 1,
        dataType: "year",
        dayFrom: dayjs().subtract(7, "day").format("YYYY-MM-DD"),
        dayTo: dayjs().format("YYYY-MM-DD"),
      },
      byear: [],
      total: 0,
      value1: "",
    };
  },
  created() {
    this.getdataA();
    this.getdataB();
    this.getdataC();
    this.getdataD();
    this.getStaff();
  },
  methods: {
    exportExcel() {
      //需给表格定义一个id或者类名
      console.log("1111111111", XLSX);
      let wb = XLSX.utils.table_to_book(document.querySelector("#table"));
      console.log("222");
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "111.xlsx"
        ); //***是自己导出文件时的命名，随意
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    // 员工执行情况
    async getdataA() {
      let { data: res } = await ProjectGroupone(this.A);
      var byear = [];
      console.log(res, "员工执行情况");
      res.data.commonDailyDataList.forEach((item) => {
        byear.push(`${item.day.substring(0, 4)}`);

        if (item.type == "type1") {
          this.option.series[0].data.push(item.number1);
        }
        if (item.type == "type2") {
          this.option.series[1].data.push(item.number1);
        }
      });
      let list = [...new Set(byear)];
      this.option.xAxis.data = list;
    },
    //工单响应时间
    async getdataB() {
      let { data: res } = await ProjectGroupone(this.B);
      var byear = [];

      console.log(res, "工单响应时间");
      res.data.commonDailyDataList.forEach((item) => {
        byear.push(`${item.day.substring(2, 7)}`);
        res.data.commonDailyDataList.forEach((item) => {
          this.option2.series[0].data.push(item.number1);
        });
      });
      let list = [...new Set(byear)];
      this.option2.xAxis.data = list;
      console.log(list, "时间");
    },
    //效率执行
    async getdataC() {
      let { data: res } = await ProjectGroupone(this.C);
      var byear = [];
      var num = [];
      var num2 = [];
      var num3 = [];
      console.log(res, "工单绩效");
      res.data.commonDailyDataList.forEach((item) => {
        byear.push(`${item.day.substring(0, 4)}`);
        this.option3.series[0].data = num;
        this.option3.series[1].data = num2;
        this.option3.series[2].data = num3;
        if (item.type == "type1") {
          num.push(item.number1);
        }
        if (item.type == "type2") {
          num2.push(item.number1);
        }
        if (item.type == "type3") {
          num3.push(item.number1);
        }
      });

      let list = [...new Set(byear)];
      this.option3.xAxis.data = list;
    },

    //工单完成时间
    async getdataD() {
      let { data: res } = await ProjectGroupone(this.D);
      var byear = [];

      console.log(res, "工单wancheng时间");
      res.data.commonDailyDataList.forEach((item) => {
        byear.push(`${item.day.substring(2, 7)}`);
        res.data.commonDailyDataList.forEach((item) => {
          this.option4.series[0].data.push(item.number1);
        });
      });
      let list = [...new Set(byear)];
      this.option4.xAxis.data = list;
      console.log(list, "时间");
    },
    //设施操作人员绩效数据
    async getStaff() {
      let { data: res } = await getStaffData({ page: this.currentPage });
      console.log("人员绩效11111111111", res);
      this.total = res.data.total;
      this.tableData = res.data.list;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handleTime(e) {
      const tableData = this.tableData;
      const start = dayjs(e[0]).format("YYYY-MM-DD HH:mm:ss");
      const end = dayjs(e[1]).format("YYYY-MM-DD HH:mm:ss");
      const rest = tableData.filter((item) =>
        dayjs(item.createTime).isBetween(start, end, "H", "[]")
      );
      this.tableData = rest;
    },
  },
};
</script>

<style lang="less" scoped>
.father {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 100%;
  background-color: #eaf2fa;
}

.card-header {
  margin-top: -3px;
  padding: 10px;
  font-size: 20px;
  font-weight: 600;
  color: #4d62a5;
  border-bottom: 1px solid #eaedf5;

  span {
    letter-spacing: 2px;
  }
}
.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.select {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0;
}

.btn {
  width: 104px;
  height: 30px;
  margin-left: 10px;
  background-color: #b4c7e7;
}

.chart {
  display: flex;
  align-items: flex-end;
}

.text {
  width: 110px;
  margin-bottom: 20px;
}

.text p {
  margin-bottom: 10px;
}

.scecharts {
  width: 85%;
}

.size {
  font-size: 14px;
  color: #7e7e7e;
}
.el-row {
  height: 391px;
}
.numsize {
  margin-left: 10px;
  font-size: 18px;
  color: #4d62a5;
}

.card-table {
  height: 300px;
  .el-table {
    :deep(.el-table__header) {
      width: 100% !important;

      thead th {
        text-align: center;
      }
    }

    :deep(.el-table__body) {
      width: 100% !important;

      tbody td {
        text-align: center;
      }
    }
  }

  .current {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
